<template>
	<view>
		<view class="content">
				<u-navbar :is-back="true" :title="title"  title-color="#000" :border-bottom="false">
				</u-navbar>
			<view class="main">
				<view class="mainNav2">
					<!-- 区县 -->
					<view class="mainNav2_item" style="border-radius:30rpx" @click="show2 = true && list2.length > 1">
						<span class="mainNav2_item_nr">{{qxName}}</span>
						<view class="mainNav2_sjx"></view>
					</view>
				</view>
				<view class="mainTable">
					<!-- 事件定界定位准确率 -->
					<view class="mainTableNr" v-if="type == 11">
						<view class="tableTh">
							<span class="tableData_topTitle" style="width: 80rpx;">区县</span>
							<span class="tableData_topTitle" style="width: 60rpx;">专业</span>
							<span class="tableData_topTitle" style="width: 170rpx;">网元名称</span>
							<span class="tableData_topTitle" style="width: 170rpx;">发生时间</span>
							<span class="tableData_topTitle" style="width: 170rpx;">资源勘误结果</span>
							<span class="tableData_topTitle" style="width: 170rpx;">产品实例标识</span>
						</view>
						<view class="tableTd" :style="{height: isHig && DataList.length > 3 ?  '450rpx' : '' }" >
							<view v-if="DataList.length>0" :class="getRowClass(index)" v-for="(item, index) in DataList" :key="index">
								<span class="tableData_bomTitle" style="width: 80rpx;">{{ item.County }}</span>
								<span class="tableData_bomTitle ccyc"  style="width: 60rpx;">{{ item.Class1 }}</span>
								<span class="tableData_bomTitle ccyc"  @click="openTc(item.Nename)" >{{ item.Nename }}</span>
								<span class="tableData_bomTitle ccyc">{{ item.Happentime }}</span>
								<span class="tableData_bomTitle ccyc">{{ item.Zyktjg }}</span>
								<view class="tableData_bomTitle ccyc"  @click="openTc(item.Cpslbs)" style="display: block;">{{ item.Cpslbs }}</view>
							</view>	
							<!-- <view class="tableTdNull" v-if="DataList.length == 0">
								无
							</view> -->
						</view>
					</view>
					<!-- 急患工单处理及时率 -->
					<view class="mainTableNr" v-if="type == 12">
						<view class="tableTh">
							<span class="tableData_topTitle" style="width: 80rpx;">区县</span>
							<span class="tableData_topTitle" style="width: 170rpx;">隐患工单号</span>
							<span class="tableData_topTitle" style="width: 170rpx;">工单主题</span>
							<span class="tableData_topTitle" style="width: 170rpx;">隐患名称</span>
							<span class="tableData_topTitle" style="width: 170rpx;">网元名称</span>
							<span class="tableData_topTitle" style="width: 170rpx;">隐患处理时限</span>
							<span class="tableData_topTitle" style="width: 170rpx;">隐患级别</span>
							
						</view>
						<view class="tableTd" :style="{height: isHig && DataList.length > 3 ?  '450rpx' : '' }" >
							<view v-if="DataList.length>0" :class="getRowClass(index)" v-for="(item, index) in DataList" :key="index">
								<span class="tableData_bomTitle" style="width: 80rpx;">{{ item.County }}</span>
								<span class="tableData_bomTitle" style="width: 170rpx;">{{ item.Code }}</span>
								<span class="tableData_bomTitle ccyc" @click="openTc(item.Subject)" >{{ item.Subject }}</span>
								<span class="tableData_bomTitle ccyc" @click="openTc(item.HiddenName)" >{{ item.HiddenName }}</span>
								<span class="tableData_bomTitle ccyc">{{ item.NeName }}</span>
								<span class="tableData_bomTitle ccyc">{{ item.Hiddentime }}</span>
								<span class="tableData_bomTitle ccyc">{{ item.Hiddenlevel }}</span>
							</view>	
							<view class="tableTdNull" v-if="DataList.length == 0">
								无
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<!-- 区县 -->
		<u-select v-model="show2" :list="list2" :default-value="defaultValue2" @confirm="confirm2"></u-select>
		<view>
			<u-popup v-model="tcText" mode="center" border-radius="12"   closeable safe-area-inset-bottom close-icon-color="#000">
				<view class="popupBox">
					<!-- <view class="titleView">温馨提示</view> -->
					<view class="boxNr">
						<view class="nrTitle">
							{{pageText}}
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		watch: {
		    '$route'(to, from) {
				console.log('to1111',to,from)
				// 根据参数更新页面数据
				this.type = this.$route.query.type
				this.cityName = this.$route.query.cityName
				this.qxName = this.$route.query.districtName || '全部'
				if(to.path == '/pagesJK/details/zhuanqu1'){
					
					this.getdataInfo();
					this.getmxcounty()
				}
				
		    }
		},
		data() {
			return {
				DataList: [],
				defaultValue2: [0],
				title: '事件定界告警关联失败数',
				isHig: false,
				type: 11,
				list2: [],
				show2: false,
				tcText: false,
				pageText: '',
				cityName: '',
				qxName: '',
			}
		},
		mounted() {
			// 根据参数更新页面数据
			this.type = this.$route.query.type
			this.cityName = this.$route.query.cityName
			this.qxName = this.$route.query.districtName || '全部'
			if(this.type == 11){
				this.title = '事件定界告警关联失败数'
			}else{
				this.title = '隐患工单超时数'
			}
			this.getdataInfo();
			this.getmxcounty()
		},
		methods: {
			openTc(text){
				this.pageText = text
				this.tcText = true
			},
			//明细
			async getdataInfo() {
				let newType = this.type 
				let parmes = '?type='+ newType + '&city=' + this.cityName + '&County=' + this.qxName + '&Revert=0' 
				let data = await this.$api.getdataInfo(parmes);
				if (data.Code == 200) {
					this.DataList = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//区县
			async getmxcounty(){
				let newType = this.type 
				let parmes = '?type='+ newType + '&city=' + this.cityName 
			
				let data = await this.$api.getmxcounty(parmes);
				if (data.Code == 200) {
					
					const newList = data.Data.map((item,index) => ({
					  value: index,
					  label: item
					}))
					console.log('newList',newList)
					this.list2 = newList || []
					const index = newList.findIndex(item => item.label === this.qxName);
					this.defaultValue2[0] = index
					this.getdataInfo()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			getRowClass(index) {
			    // 检查行号是否为奇数（长度为1、3、5等）
			    if (index % 2 !== 0) {
			      return 'odd-row tableTr';
			    }
			    return 'tableTr';
			},
			confirm2(e){
				this.qxName = e[0].label
				const index = this.list2.findIndex(item => item.label === this.qxName);
				this.defaultValue2[0] = index
				this.getdataInfo()
			},
		}
	}
</script>

<style lang="less">
	.content{
		height: 100vh;
		overflow: hidden;
	}
	.main {
		width: 100%;
		min-height: calc(100vh - 88rpx) ;
		background: #F5F6F7;
		display: block;
		.mainNav{
			display: flex;
			align-items: center;
			width: 750rpx;
			background-color: #fff;
			border-top: 1px solid #F0F1F2;
			position: fixed;
			top: 88rpx;
			left: 0;
			z-index: 100;
			.mainNavItem{
				display: inline-block;
				line-height: 84rpx;
				font-size: 30rpx;
				margin-left: 32rpx;
				margin-right: 10rpx;
				color: #A7ABBB;
			}
			.nav2{
				width: 44%;
				text-align: center;
			}
		}
		.mainNav2{
			width: 750rpx;
			height: 86rpx;
			background: #EEF4FC;
			border: 1rpx solid #FFFFFF;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			position: fixed;
			top: 90rpx;
			left: 0;
			z-index: 100;
			.mainNav2_item{
				padding: 12rpx 34rpx;
				background: #FFFFFF;
				font-size: 26rpx;
				border-radius: 30rpx;
				border: 1rpx solid #F1F1F1;
				display: flex;
				align-items: center;
				margin-right: 20rpx;
			}
			.mainNav2_sjx{
				  width: 0;
				  height: 0;
				  border-left: 10rpx solid transparent; /* 左边框透明 */
				  border-right: 10rpx solid transparent; /* 右边框透明 */
				  border-top: 18rpx solid #000; /* 上边框有颜色，形成三角形 */
				  margin-left: 26rpx;
			}
		}
		.mainTable{
			width: 750rpx;
			background: #FFFFFF;
			margin-top: 93rpx;
			display: inline-block;
			.mainTable_topTitle{
				height: 98rpx;
				display: flex;
				align-items: center;
				.mainTable_topTitle_ble{
					margin-left: 34rpx;
					margin-right: 22rpx;
					width: 8rpx;
					height: 30rpx;
					background: #1B9CFF;
					border-radius: 4rpx;
				}
				.mainTable_topTitle_name{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					font-style: normal;
					text-transform: none;
				}
			}
			.mainTableNr{
				width: 710upx;
				border-radius: 20upx 20upx 0 0;
				overflow: hidden;
				position: relative;
				margin: 30rpx auto;
				background-color: #fff;
				overflow-x: auto;
				.tableTh{
					height: 103rpx;
					background: #F2F5F8;
					box-shadow: inset 0rpx 10rpx 6rpx 1rpx rgba(108,148,182,0.2);
					border: 1rpx solid #A4B8D3;
					border-radius: 20upx 20upx 0 0;
					display: flex;
					align-items: center;
					overflow: hidden;
					position: absolute;
					top: 0;
					.tableData_topTitle{
						width: 200rpx;
						flex: 1;
						text-align: center;
						display: block;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #2654B0;
						margin: 0 5rpx;
					}
				
				}
				.tableTd{
						padding: 100upx 0 0;
						height: 1260rpx;
						display: inline-block;
						overflow-y: auto;
						.tableTr{
							padding: 10upx 0;
							display: flex;
							align-items: center;
							border-radius: 8rpx;
							width: max-content;
						}
						.odd-row{
							background: #F1F6FF;
						}
						.tableData_bomTitle{
							width: 169rpx;
							flex: 1;
							text-align: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24upx;
							color: #5F6475;
							line-height: 24px;
							font-style: normal;
							text-transform: none;
							margin: 0 5rpx;
						}
					}
				.gengduo{
					width: 709upx;
					height: 60upx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #F1F6FF;
					position: absolute;
					bottom: 0;
					left: 0;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24upx;
					color: #2654B0;
					.icon_arrow_down{
						width: 24upx;
						height: 12upx;
						margin-left: 13upx;
					}
				}
				.tableTdNull{
					width: 100vw;
					text-align: center;
					margin: 40rpx auto;
					font-size: 28rpx;
					color: #5F6475;
				}
			}
			
		}
	}
	.ccyc{
		overflow: hidden; /* 隐藏超出部分 */
		display: -webkit-box; /* 使用 WebKit 线性布局 */
		-webkit-line-clamp: 2; /* 限制显示两行 */
		-webkit-box-orient: vertical; /* 垂直排列内容 */
		text-overflow: ellipsis; /* 显示省略号 */
	}
	.popupBox{
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		.boxNr{
			width: 500rpx;
			max-height: 600rpx;
			background: #F7F9FC;
			overflow-y: auto;
		}
		.nrTitle{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: #000000;
			font-style: normal;
			text-transform: none;
			padding: 28upx 30upx;
		
		}
	}
</style>